<template>
  <div class="v-simple-cropper">
    <slot>
      <button @click="upload">上传图片</button>
    </slot>
    <input class="file" ref="file" type="file" accept="image/*" @change="uploadChange">
    <div class="v-cropper-layer changeavatar" ref="layer">
      <h1>修改图片</h1>
      <div class="avatarbox" style="padding:0;">
        <!-- <div class="layer-header">  
            <button class="cancel" @click="cancelHandle">取消</button>  
            <button class="confirm" @click="confirmHandle">裁剪</button>  
          </div>   -->
        <img ref="cropperImg">
      </div>
      <div>
        <el-row style="margin-top:10px;">
          <el-button type="primary" round size="small" @click="cancelHandle">取消</el-button>
          <el-button type="success" round size="small" @click="confirmHandle">裁剪</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import Cropper from 'cropperjs';
  import 'cropperjs/dist/cropper.min.css';
  export default {
    name: 'v-simple-cropper',
    props: {
      initParam: Object,
      successCallback: {
        type: Function,
        default: () => {}
      }
    },
    data() {
      return {
        cropper: {},
        filename: '',
        dialogVisible: false
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      // 初始化裁剪插件  
      init() {
        let cropperImg = this.$refs['cropperImg'];
        this.cropper = new Cropper(cropperImg, {
          aspectRatio: 1 / 1,
          dragMode: 'move'
        });
      },
      // 点击上传按钮  
      upload() {
        this.$refs['file'].click();
      },
      // 选择上传文件  
      uploadChange(e) {
        let file = e.target.files[0];
        this.filename = file['name'];
        let URL = window.URL || window.webkitURL;
        this.$refs['layer'].style.display = 'block';

        this.cropper.replace(URL.createObjectURL(file));
        this.dialogVisible = true;

      },
      // 取消上传  
      cancelHandle() {
        this.cropper.reset();
        this.$refs['layer'].style.display = 'none';
        this.$refs['file'].value = '';
      },
      // 确定上传  
      confirmHandle() {
        let cropBox = this.cropper.getCropBoxData();
        let scale = this.initParam['scale'] || 1;
        let cropCanvas = this.cropper.getCroppedCanvas({
          width: cropBox.width * scale,
          height: cropBox.height * scale,
          fillColor: '#fff'
        });
        let imgData = cropCanvas.toDataURL('image/jpeg');
        let formData = new window.FormData();
        //formData.append('fileType', this.initParam['fileType'])  
        //   formData.append('img', imgData)  
        //   formData.append('Name', this.filename)        
        formData.append(this.filename, imgData);
        //    formData.append(this.filename, file.content);
        //   console.log(imgData);
        axios.post(this.initParam['uploadURL'], formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          this.successCallback(res.data);
          this.cancelHandle();
          // this.$toast('上传成功，新文件名:' + res.data.data);
        });
      }
    }
  };

</script>

<style lang="scss" scoped>
  .v-simple-cropper {
    .file {
      display: none;
    }

    .avatarbox {
      position: relative;
      overflow: hidden;
      height: 478px;
    }

    .v-cropper-layer {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      z-index: 99999;
      display: none;

      .layer-header {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 99999;
        width: 100%;
        height: 36px;
        padding: 0 10px;
        box-sizing: border-box;
      }

      .cancel,
      .confirm {
        line-height: 36px;
        font-size: 16px;
        background: inherit;
        border: 0;
        outline: 0;
        float: left;
        color: #fff;
      }

      .confirm {
        float: right;
      }

      img {
        position: inherit !important;
        border-radius: inherit !important;
        float: inherit !important;
      }
    }

    .changeavatar {
      background: #fff;
      top: -70px;
      bottom: -90px;
    }

    .changeavatar h1 {
      font-size: 18px;
      text-align: left;
      padding: 10px 0;
    }
  }

</style>
